<template>
  <div class="style-page">
    <div class="line"></div>
    <div class="head-title">{{ showComponentData.title }}</div>
    <div class="line"></div>

    <div class="component-style">
      <el-form :model="form">
        <el-form-item label="布局方式">
          <el-radio-group v-model="showComponentData.layout">
            <el-radio label="列表" value="list" />
            <!--            <el-radio label="一行多个" value="scroll" />-->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="背景色">
          <el-color-picker v-model="form.backgroundColor"></el-color-picker>
          <el-input style="width: 160px; margin-left: 10px" v-model="form.backgroundColor">
            <template #append>
              <el-button @click="form.backgroundColor = '#ff3c29'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="head-title">内容</div>
    <div class="add-area">
      <VueDraggable
        v-model="showComponentData.default_sub_list"
        :animation="150"
        ghostClass="ghost"
        class="content"
        @end="handleUpdateComponent"
      >
        <div
          v-for="(item, index) in showComponentData.default_sub_list"
          :key="item.id"
          class="coupon-item"
        >
          <div class="coupon-item__left">
            <div class="price-wrapper" v-if="item.type === 1">
              <span class="symbol">¥</span>
              <span class="amount">{{ item.discountAmount }}</span>
            </div>
            <div class="price-wrapper" v-else-if="item.type === 2">
              <span class="amount">{{ item.discountRate }}</span>
              <span class="symbol">折</span>
            </div>
            <div class="condition">满{{ item.minConsumption }}元可用</div>
          </div>
          <div class="coupon-item__center">
            <div class="info-main">
              <div class="title">{{ item.name }}</div>
              <div class="expiry">{{
                getExpiryText(item.expiryType, item.validityDays, item.endTime)
              }}</div>
            </div>
            <div class="restrictions">
              <span style="color: #9e9e9e" v-if="item.scope === 1">全场景通用</span>
              <span v-if="item.scope === 2">限购买班型可用</span>
              <span v-if="item.scope === 3">限购买会员卡可用</span>
            </div>
          </div>
          <el-icon class="del-icon" :size="20" @click="handleDel(index)"
            ><CircleCloseFilled
          /></el-icon>
        </div>

        <div>
          <el-tag type="primary" class="submit-btn" @click="handleAdd">添加优惠卷</el-tag>
        </div>
      </VueDraggable>
    </div>

    <div class="component-style">
      <common-style
        :content-data="showComponentData"
        @update-style="handleUpdateStyle"
      ></common-style>
    </div>

    <coupon-choose-dialog
      v-if="showCouponDialog"
      :show-coupon-dialog="showCouponDialog"
      :default-selected-data="showComponentData.default_sub_list"
      @close-dialog="closeCouponDialog"
    ></coupon-choose-dialog>
  </div>
</template>

<script setup lang="ts">
  import CommonStyle from '@/views/decoration/diyComponents/CommonStyleComponent/CommonStyle.vue'
  import CouponChooseDialog from '@/views/decoration/diyComponents/CouponChooseDialog.vue'
  import debounce from 'lodash/debounce'
  import { CircleCloseFilled } from '@element-plus/icons-vue'
  import { VueDraggable } from 'vue-draggable-plus'
  const props = defineProps({
    contentData: {
      type: Object,
      default: () => ({})
    }
  })
  const emit = defineEmits(['updateData'])

  const form = reactive({
    backgroundColor: '#f7553b'
  })

  const showCouponDialog = ref(false)

  watch(
    form,
    () => {
      emitFormUpdate()
    },
    { deep: true }
  )

  const emitFormUpdate = debounce(() => {
    showComponentData.value.itemStyle.backgroundColor = form.backgroundColor
    handleUpdateComponent()
  }, 300)

  const showComponentData = ref(props.contentData)

  function handleUpdateStyle(val: any) {
    showComponentData.value.style = val
    handleUpdateComponent()
  }

  function closeCouponDialog(value: any) {
    if (value) {
      showComponentData.value.default_sub_list = value
    }
    showCouponDialog.value = false
  }

  function handleDel(index: number) {
    showComponentData.value.default_sub_list.splice(index, 1)
  }

  function handleAdd() {
    showCouponDialog.value = true
  }

  function handleUpdateComponent() {
    emit('updateData', showComponentData.value)
  }

  function getExpiryText(expiryType: number, validityDays?: number, endTime?: string): string {
    const now = new Date()

    if (expiryType === 1 && validityDays) {
      const target = new Date(now.getTime() + validityDays * 24 * 60 * 60 * 1000)

      const yyyy = target.getFullYear()
      const mm = String(target.getMonth() + 1).padStart(2, '0')
      const dd = String(target.getDate()).padStart(2, '0')

      return `有效期至 ${yyyy}/${mm}/${dd} 23:59`
    }

    if (expiryType === 2 && endTime) {
      const target = new Date(endTime.replace(/-/g, '/')) // Safari 兼容
      const yyyy = target.getFullYear()
      const mm = String(target.getMonth() + 1).padStart(2, '0')
      const dd = String(target.getDate()).padStart(2, '0')
      const hh = String(target.getHours()).padStart(2, '0')
      const mi = String(target.getMinutes()).padStart(2, '0')

      return `有效期至 ${yyyy}/${mm}/${dd} ${hh}:${mi}`
    }

    return '有效期未知'
  }

  onMounted(() => {
    if (showComponentData.value.itemStyle.backgroundColor) {
      form.backgroundColor = showComponentData.value.itemStyle.backgroundColor
    }
  })
</script>

<style scoped lang="scss">
  .style-page {
    padding: 20px;

    .head-title {
      padding: 20px 0;
      font-size: 16px;
      font-weight: bold;
    }

    .line {
      width: 100%;
      height: 1px;
      background: #f5f7fa;
    }

    .submit-btn {
      width: 100%;
      height: 40px !important;
      cursor: pointer;
      font-size: 14px;
    }

    .component-style {
      margin: 20px 0;

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;

        .title {
          font-size: 16px;
          font-weight: bold;
        }
      }
    }

    .content {
      display: flex;
      flex-direction: column;
      gap: 10px;

      .coupon-item {
        display: flex;
        align-items: stretch;
        background-color: #f5f5f5;
        border-radius: 12px;
        padding: 0 6px;
        position: relative;

        &:hover {
          .del-icon {
            display: block;
          }
        }

        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          width: 8px;
          background-color: #fa2b2b;
          border-radius: 8px 0 0 8px;
        }
      }

      .coupon-item__left {
        width: 100px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: relative;
      }

      .price-wrapper {
        color: #fa2b2b;
        font-weight: bold;
        display: flex;
        align-items: baseline;

        .symbol {
          font-size: 14px;
        }

        .amount {
          font-size: 28px;
          line-height: 1;
        }

        .decimal {
          font-size: 14px;
        }
      }

      .condition {
        font-size: 12px;
        color: #999;
        margin-top: 6px;
      }

      .coupon-item__center {
        flex: 1;
        padding: 15px 12px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 12px;
        overflow: hidden;
      }

      .info-main {
        .title {
          font-size: 15px;
          font-weight: bold;
          color: #333;

          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .expiry {
          font-size: 11px;
          color: #999;
          margin-top: 6px;
        }
      }

      .restrictions {
        font-size: 10px;
        color: #ff3c29;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 8px;
      }

      .coupon-item__right {
        width: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .del-icon {
        display: none;
        position: absolute;
        top: -2px;
        right: -2px;
        cursor: pointer;
        color: #8c939d;
      }
    }
  }
</style>
